$(function () {
 let layer = layui.layer
 // 1.1 获取裁剪区域的 DOM 元素
 var $image = $('#image')
 // 1.2 配置选项
 const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview'
 }

 // 1.3 创建裁剪区域
 $image.cropper(options)

 // 选择图片
 $('#upclode-btn1').on('click', function () {
  $('#file').click()
 })
 $('#file').on('change', function (e) {
  var file = e.target.files[0]
  var newImgURL = URL.createObjectURL(file)
  $image
   .cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', newImgURL)  // 重新设置图片路径
   .cropper(options)        // 重新初始化裁剪区域

 })
 $('#upclode-btn2').on('click', function () {
  var dataURL = $image
   .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 100,
    height: 100
   })
   .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
  axios({
   method: 'POST',
   url: '/my/update/avatar',
   data: 'avatar=' + encodeURIComponent(dataURL),
   headers: {
    Authorization: localStorage.getItem('token')
   }
  }).then(function (res) {
   console.log(res.data)
   if (res.data.status != 0) {
    // 提示错误
    return layer.msg(res.data.message)
   }
   // 成功后提示
   layer.msg('更换成功')
   // 刷新页面
   window.parent.getUserInfo()

  })
 })

})

